<template>
    <el-drawer :visible.sync="drawer" direction="rtl" size="50%" :with-header="false" :width="700">
        <div class="drawer_box">
            <div class="drawer_title">
                <div class="drawer_t">
                    <div class="drawer_t_l">
                        <img class="drawer_t_l_img"
                            src="../../../../../static/skin/herodoo/main/platform/home/img/piliangoumai.png" alt="" />
                        派车
                    </div>
                    <img class="drawer_t_r" src="../../../../../static/skin/herodoo/main/platform/home/img/guanbi.png"
                        alt="" @click="drawer = false" />
                </div>
            </div>
            <div class="drawer_content">
                <div class="title">订单信息：</div>
                <div class="content-box">
                    <div class="label">订单编号：</div>
                    <div class="desc">
                        {{ messageList.Code }}
                        <div class="states" :style="getState(messageList.STATUS, 'STATUS').style">{{ messageList.STATUS
                            }}</div>
                    </div>
                </div>
                <div class="content-box">
                    <div class="label">权益名称：</div>
                    <div class="desc name" @click="linkToDetail">{{ messageList.NAME }}</div>
                </div>
                <div class="content-box">
                    <div class="label">产品名称：</div>
                    <div class="desc">{{ messageList.ProductName }}</div>
                </div>
                <div class="content-box">
                    <div class="label">产品类型：</div>
                    <div class="desc">{{ messageList.ProductFlagListName }}</div>
                </div>
                <div class="content-box mt-10">
                    <div class="label">购买数量：</div>
                    <div class="desc">{{ messageList.Quantity }}</div>
                </div>
                <div class="content-box">
                    <div class="label">使用人：</div>
                    <div class="desc">{{ messageList.ServiceCompanyName }}</div>
                </div>
                <div class="content-box">
                    <div class="label">使用人数：</div>
                    <div class="desc">{{ codeList.length }}</div>
                </div>


                <div class="block">
                    <div class="title2">使用人列表：</div>
                    <div class="content-box">
                        <el-table :data="codeList.queryData" stripe style="width: 100%">
                            <el-table-column prop="Name" label="姓名" width="60">
                            </el-table-column>
                            <el-table-column prop="Mobile" label="联系方式" width="130">
                            </el-table-column>
                            <el-table-column prop="TypeID" label="证件类型" width="180">
                            </el-table-column>
                            <el-table-column prop="PurchaseID" label="证件号码" width="180">
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="end" v-if="total > 0">
                        <el-pagination background layout="prev, pager, next" :total="total" :current-page="currentPage"
                            :page-size="pageSize" @current-change="handleCurrentChange">
                        </el-pagination>
                    </div>

                </div>

                <div class="content-box">
                    <div class="label">联系人：</div>
                    <div class="desc">{{ messageList.PurchaseContact }}</div>
                </div>

                <div class="content-box">
                    <div class="label">联系方式：</div>
                    <div class="desc">{{ messageList.PurchaseMobile }}</div>
                </div>
                <div class="content-box">
                    <div class="label">备注：</div>
                    <div class="desc">{{ messageList.PurchaseRemarks }}</div>
                </div>

                <div class="block" v-for="(jtem, i) in carForm" :key="i">
                    <div class="title2 mt-10">车辆{{ i + 1 }}：</div>
                    <div class="content-box">
                        <div class="label">车型：</div>
                        <div class="form-item">
                            <el-select :key="i" v-model="jtem.carTypeValue" placeholder="请选择汽车类型" filterable clearable
                                @change="changeCarType($event, i)">
                                <el-option v-for="(subItem, subIndex) in jtem.carTypeOptions" :key="subIndex"
                                    :label="subItem.Name" :value="subItem.ID">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="content-box">
                        <div class="label">司机：</div>
                        <div class="form-item">
                            <!-- <oSelect></oSelect> -->
                            <el-select v-model="jtem.peopleValue" filterable placeholder="请选择司机"
                                @change="changeDriver($event, i)" clearable>
                                <el-option v-for="item in jtem.peopleOptions" :key="item.ID" :label="item.label"
                                    :value="item.ID">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="content-box">
                        <div class="label">车牌号：</div>
                        <div class="form-item">
                            <el-select :key="i" v-model="jtem.value" placeholder="请选择车牌号" filterable clearable
                                @change="changeCar($event, i)">
                                <el-option v-for="(subItem, subIndex) in jtem.carOptions" :key="subIndex"
                                    :label="subItem.Code" :value="subItem.Code">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="drawer_footer">
            <div class="footer-btn" @click="handleSendCar">派车</div>
        </div>
    </el-drawer>
</template>

<script>
import oSelect from "./oSelect.vue"
import orderStatus from "../../../../../static/skin/default/base/js/orderStatus";
export default {
    name: '',
    components: {
        oSelect
    },
    props: {
        messageList: {
            type: Object,
            default: {},
        },
    },
    watch: {
    },
    data() {
        return {
            octopus: this.$parent.octopus,
            drawer: false,
            states: {
                name: '订单状态',
                is_index: 0,
                is_type: '',
                arr: orderStatus,
            },
            carList: [],
            carListCopy: [],
            peopleOptions: [],
            carForm: [
            ],
            carTypeList: [],
            codeList: [],
            total: 0,
            currentPage: 1, // 当前页
            pageSize: 10, // 每页显示条数
            searchValue: {
                Code: 'NULL',
                TypeID: 'NULL',
                SystemID: 'NULL',
                Driver: 'NULL',
                BrandID: 'NULL',
                CompanyID: 'NULL',
            }
        };
    },
    mounted() {
        this.getData();
    },
    methods: {
        async getData() {
            await this.getCarList();
            await this.getCarType();
            await this.getDriver();
        },
        drawerOp() {
            this.drawer = true;
        },
        getState(i, type) {
            let obj = {};
            if (type == 'index') {
                this.states.arr.filter((item, o) => {
                    if (o == i) {
                        obj = item
                    }
                })
            }
            if (type == 'id' || type == 'type') {
                this.states.arr.filter(item => {
                    if (item[type] == i) {
                        obj = item
                    }
                })
            }
            if (type.toLowerCase() == 'status') {
                this.states.arr.filter(item => {
                    if (item.name == i) {
                        obj = item
                    }
                })
            }
            obj.style = `color:${obj.color};background:${obj.bgColor};borderColor:${obj.color}`;
            return obj;
        },
        // 获取车型信息
        getCarType() {
            this.octopus.request.api.post(
                "/Octopus/Engine/List",
                {
                    id: 1227,
                    cellData: [
                        { name: "ID" },	// ID
                        { name: "Name" },	// Name
                        { name: "ParentkeyValue" },	// ParentkeyValue
                    ],
                },
                (data) => {
                    if (data.status.code == 200) {
                        this.carTypeList = data.content.queryData;
                    } else {
                        this.octopus.tips.error(data);
                    }
                });
        },
        //获取旅客身份信息
        getCode() {
            return this.octopus.request.api.post(
                "/Octopus/Engine/List",
                {
                    id: 1223,
                    paramData: { id: this.messageList.ID },
                    pageData: {
                        index: this.currentPage,
                        rowSize: this.pageSize
                    },
                    cellData: [
                        { name: "CreateTime" },	// CreateTime
                        { name: "CreateUserID" },	// CreateUserID
                        { name: "ID" },	// ID
                        { name: "IdentityNumber" },	// IdentityNumber
                        { name: "Mobile" },	// Mobile
                        { name: "Name" },	// Name
                        { name: "PurchaseID" },	// PurchaseID
                        { name: "TypeID" },	// TypeID
                    ],
                },
                (data) => {
                    if (data.status.code == 200) {
                        this.codeList = data.content;
                        this.total = data.content.pageData.totalRows;
                    } else {
                        this.octopus.tips.error(data);
                    }
                });
        },
        // 获取司机信息
        getDriver() {
            this.octopus.request.api.post(
                "/Octopus/Engine/List",
                {
                    id: 1219,
                    cellData: [
                        { name: "Address" },	// 地址
                        { name: "Age" },	// 年龄
                        { name: "Code" },	// 工号
                        { name: "CompanyID" },	// 公司ID
                        { name: "CompanyName" },	// 公司名
                        { name: "CreateDate" },	// 创建时间
                        { name: "CreateUserID" },	// 创建人
                        { name: "CreateUserName" },	// 创建人
                        { name: "DepartmentID" },	// 部门ID
                        { name: "ID" },	// ID
                        { name: "IdentityNumber" },	// 身份证号
                        { name: "Mobile" },	// 手机号
                        { name: "Name" },	// 账号名/手机号
                        { name: "NickName" },	// 昵称
                        { name: "RealName" },	// 真实名
                        { name: "RoleID" },	// 所属岗位
                        { name: "RoleName" },	// 角色
                        { name: "Sex" },	// 性别
                        { name: "TypeID" },	// 人员类型
                    ],
                    paramData: {
                        CompanyID: 81,
                        RoleID: '141',
                        Status: '1'
                    }
                },
                (data) => {
                    if (data.status.code == 200) {
                        data.content.queryData.map(v => {
                            v.label = `${v.Code}-${v.Name}-${v.Mobile}`
                        })
                        this.peopleOptions = data.content.queryData;
                    } else {
                        this.octopus.tips.error(data);
                    }
                });
        },
        // 获取车牌号
        getCarList() {
            this.octopus.request.api.post(
                "/Octopus/Engine/List",
                {
                    id: 1212,
                    cellData: [
                        { name: "Code" },	// 车牌
                        { name: "BrandID" },	// 车品牌
                        { name: "SystemID" },	// 车系
                        { name: "TypeID" },	// 车型
                        { name: "CreateUserID" },	// 创建人
                        { name: "CreateTime", width: 200 },	// 创建时间
                        // 说明
                        { name: "CompanyID", show: false },	// 车辆所属公司
                        { name: "Driver", show: false },	// 司机
                        { name: "ID", show: false },	// ID
                        { name: "Mobile", show: false },	// 手机号
                        { name: "UseCount", show: false },	// 使用人数
                    ],
                },
                (data) => {
                    if (data.status.code == 200) {
                        this.carList = data.content.queryData;
                    } else {
                        this.octopus.tips.error(data);
                    }
                });
        },

        async updata() {
            this.carForm = [];
            await this.getCode();
            this.getSendCarInfo()
            // await this.createObj();
        },
        createObj(data) {
            for (let i = 0; i < this.messageList.Quantity; i++) {
                this.carForm.push({
                    value: data.CarCode,
                    carTypeValue: data.TypeID ? parseInt(data.TypeID) : null,
                    peopleValue: data.ContactID ? parseInt(data.ContactID) : null,
                    carOptions: this.carList,
                    carTypeOptions: this.carTypeList,
                    peopleOptions: this.peopleOptions,
                    searchValue: JSON.parse(JSON.stringify(this.searchValue)),
                    ...data
                })
            }
            this.carListCopy = JSON.parse(JSON.stringify(this.carForm));
            this.carForm.map((v, i) => {
                this.carForm[i].peopleOptions = v.peopleOptions.filter(x => v.peopleValue == null || x.ID == v.peopleValue);
                this.carForm[i].carOptions = v.carOptions.filter(x => v.value == null || x.Code == v.value);
                this.carForm[i].searchValue = {
                    Code: this.carForm[i].value || 'NULL',
                    TypeID: this.carForm[i].TypeID || 'NULL',
                    SystemID: 'NULL',
                    Driver: this.carForm[i].peopleValue || 'NULL',
                    BrandID: 'NULL',
                    CompanyID: 'NULL',
                }
            })
        },
        // 跳转权益详情
        linkToDetail() {
            this.$emit('drawerUpDetail')
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getCode();
        },
        // 车型切换
        changeCarType(e, i) {
            this.carForm[i].searchValue.TypeID = e == '' ? 'NULL' : e;
            // 还原下拉数据
            if (e == '') {
                this.carForm[i].carOptions = this.carListCopy[i].carOptions;
                this.carForm[i].peopleOptions = this.carListCopy[i].peopleOptions;
                return
            }
            this.SearchAll(i, 'CarType');
        },
        //司机切换
        changeDriver(e, i) {
            this.carForm[i].searchValue.Driver = e == '' ? 'NULL' : e;
            this.carForm[i].Mobile = e != '' ? (this.carForm[i].peopleOptions || []).find(item => item.ID == e).Mobile : ''
            // 还原下拉数据
            if (e == '') {
                this.carForm[i].carOptions = this.carListCopy[i].carOptions;
                this.carForm[i].carTypeOptions = this.carListCopy[i].carTypeOptions;
                return
            }
            this.SearchAll(i, 'Driver');
        },
        //车牌切换
        changeCar(e, i) {
            this.carForm[i].searchValue.Code = e == '' ? 'NULL' : e;
            this.carForm[i].CarID = e != '' ? (this.carForm[i].carOptions || []).find(item => item.Code == e).ID : ''
            // 还原下拉数据
            if (e == '') {
                this.carForm[i].peopleOptions = this.carListCopy[i].peopleOptions;
                this.carForm[i].carTypeOptions = this.carListCopy[i].carTypeOptions;
                return
            }
            this.SearchAll(i, 'Code');
        },
        // 搜索数据
        SearchAll(i, type = 'all') {
            return this.octopus.request.api.post(
                "/Octopus/Engine/List",
                {
                    id: 1232,
                    cellData: [
                        { name: "Code" },	// 司机工号
                        { name: "Driver" },	// 司机
                        { name: "ID" },	// ID
                        { name: "Mobile" },	// 手机号
                        { name: "Name" },	// 司机
                        {name: "TypeID"},	// 车系
                    ],
                    paramData: this.carForm[i].searchValue
                },
                (data) => {
                    if (data.status.code == 200) {

                        if (type == 'CarType') {
                            // 处理车牌
                            this.carForm[i].carOptions = this.carForm[i].carOptions.filter(item => data.content.queryData.some(ele => ele.ID == item.ID));
                            // 处理司机
                            this.carForm[i].peopleOptions = this.carForm[i].peopleOptions.filter(item => data.content.queryData.some(ele => ele.Driver == item.ID));
                        }

                        if (type == 'Driver') {
                            // 处理车型
                            this.carForm[i].carTypeOptions = this.carForm[i].carTypeOptions.filter(item => data.content.queryData.some(ele => ele.TypeID == item.ID));
                            // 处理车牌
                            this.carForm[i].carOptions = this.carForm[i].carOptions.filter(item => data.content.queryData.some(ele => ele.ID == item.ID));
                        }

                        if (type == 'Code') {
                            // 处理车型
                            this.carForm[i].carTypeOptions = this.carForm[i].carTypeOptions.filter(item => data.content.queryData.some(ele => ele.TypeID == item.ID));
                            // 处理司机
                            this.carForm[i].peopleOptions = this.carForm[i].peopleOptions.filter(item => data.content.queryData.some(ele => ele.Driver == item.ID));
                        }


                    } else {
                        this.octopus.tips.error(data);
                    }
                });

        },
        // 获取派车信息
        getSendCarInfo() {
            this.octopus.request.api.post(
            "/Octopus/Engine/List",
            {
                id: 1234,
                cellData: [
                    {name: "BrandID"},	// BrandID
                    {name: "BrandIDName"},	// BrandIDName
                    {name: "CarCode"},	// 车牌
                    {name: "CarID"},	// 车辆ID
                    {name: "ContactID"},	// 司机
                    {name: "ID"},	// 订单ID
                    {name: "InventoryDetailID"},	// 库存明细ID
                    {name: "Mobile"},	// 司机手机号
                    {name: "SystemID"},	// SystemID
                    {name: "SystemIDName"},	// SystemIDName
                    {name: "TypeID"},	// 车系
                    {name: "TypeIDName"},	// 车系
                ],
                paramData: {
                    ID: this.messageList.ID
                }
            },
            (data) => {
                if (data.status.code == 200) {
                    data.content.queryData.map(item=> {
                        this.createObj(item)
                    })
                } else {
                    this.octopus.tips.error(data);
                }
            })
        },
        // 派车
        handleSendCar() {
            let count = 0
            this.carForm.map(item => {
                if (!item.value || !item.carTypeValue || !item.peopleValue) {
                    count++
                }
            })
            if (count != 0) {
                this.$message.error("请先完善车辆信息")
                return
            }
            let queue = []
            this.carForm.map(item => {
                queue.push(this.updateSendCarDetail(item))
            })
            Promise.all(queue).then(res => {
                this.$message.success('派车成功')
                this.drawer = false
                this.$emit("refresh")
            })
        },
        // 修改派车信息
        updateSendCarDetail(item) {
            return new Promise((resolve, reject) => {
                this.octopus.request.api.post("/Octopus/Engine/Item", {
                    id: 33,
                    type: "UPDATE",
                    value: item.InventoryDetailID,
                    cellData: [
                        {name: "CarID", defaultValue: item.CarID},	// 车辆ID
                        {name: "ContactID", defaultValue: item.peopleValue},	// 司机
                        {name: "Mobile", defaultValue: item.Mobile},	// 司机手机号
                        {name: "ConfirmID", defaultValue: this.octopus.passport.id}, //调度人
                        {name: "ConfirmTime", defaultValue: new Date().toJSON().substring(0, 10) + ' ' + new Date().toTimeString().substring(0,8)}, //派车时间
                    ],
                },
                    (data) => {
                        if (data.status.code == 200) {
                            this.updateOrderStatus(item).then(res => {
                                resolve(true)
                            })
                        } else {
                            this.octopus.tips.error(data);
                        }
                    })
            })
        },
        // 修改订单状态
        updateOrderStatus(item) {
            return new Promise((resolve, reject) => {
                this.octopus.request.api.post("/Octopus/Engine/Item", {
                    id: 1200,
                    type: "UPDATE",
                    value: item.ID,
                    cellData: [
                        { name: "Status", defaultValue: 13 }, //状态 待使用
                    ],
                },
                    (data) => {
                        if (data.status.code == 200) {
                            resolve(data.content.queryData)
                        } else {
                            this.octopus.tips.error(data);
                        }
                    })
            })
        },
    },
};
</script>
<style scoped>
.drawer_box {
    padding: 3rem 0.8rem 3rem 0;
    height: calc(100% - 8rem);
    display: flex;
    flex-direction: column;
}

.drawer_title {
    box-shadow: 0px 5px 5px rgb(230 228 228 / 30%);
    padding-bottom: 1rem;
}

.drawer_t {
    padding: 0 2.8rem;
    display: flex;
    justify-content: space-between;
}

.drawer_t_l {
    display: flex;
    align-items: center;
    font-size: 2rem;
    font-weight: bold;
}

.drawer_t_l_img {
    width: 2.8rem;
    margin-right: 1rem;
}

.drawer_t_r {
    width: 3rem;
    height: 3rem;
    cursor: pointer;
}

.drawer_content {
    overflow-y: auto;
    margin-top: 1.5rem;
    height: calc(100vh - 13rem);
    padding: 0 3rem;
    width: 100%;
    padding-bottom: 1rem;
}

.drawer_content .title {
    font-size: 1.8rem;
    font-weight: bold;
}

.drawer_content .title2 {
    font-size: 1.8rem;
}

.drawer_content .driver-title {
    margin-top: 1em;
}

.content-box {
    display: flex;
    align-items: center;
    margin: 2rem 0 2rem 2em;
}


.mt-10 {
    margin-top: 20px;
}

.content-box .label {
    width: 25%;
}

.content-box .label .label-bold {
    font-size: 1.8rem;
    font-weight: bold;
}

.content-box .desc {
    /* flex: 1; */
    display: flex;
    flex-direction: row;
    align-items: center;
}

.name {
    color: #288ffd;
    text-decoration: underline;
    cursor: pointer;
}

.states {
    /* font-size: 1vw; */
    padding: 5px 10px;
    border: 1px solid #000;
    border-radius: 5px;
    margin-left: 20px;
}

.form-item {
    display: flex;
    align-items: center;
    width: 100%;
}

.form-item .label {
    width: 25%;
    display: flex;
    align-items: center;
}

.form-item .input {
    width: 100%;
    height: 5rem;
    line-height: 5rem;
    padding: 0 2rem;
    border: 1px solid #F3E8E2;
    border-radius: 1rem;
}

.form-item>>>.el-select {
    width: 100%;
    height: 4.5rem;
    line-height: 5rem;
}

.form-item>>>.el-select .el-input {
    width: 100%;
    height: 4.5rem;
}

.form-item>>>.el-select .el-input__inner {
    cursor: pointer;
    padding-right: 35px;
    height: 100%;
    font-size: 1.8rem;
}

.form-item>>>.el-input__icon {
    line-height: 3.5rem;
}

.btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    height: 4vh;
    padding: 0 30px;
    margin: 0 30px;
}

.btn div {
    background: #ff8b0f;
    color: #fff;
    padding: 10px 30px;
    border-radius: 20px;
    cursor: pointer;
}

.end {
    display: flex;
    justify-content: flex-end;
}

>>>.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #ff8a36;
}

.drawer_footer {
    display: flex;
    justify-content: flex-end;
    align-content: center;
}

.drawer_footer .footer-btn {
    line-height: 4rem;
    background-color: #F78C51;
    color: #fff;
    margin: 0 1rem;
    padding: 0 3rem;
    border-radius: .5rem;
    cursor: pointer;
}

.drawer_footer .reject {
    background-color: #2e3037;
}
</style>